<template>
  <el-page-header>
    <template #breadcrumb>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item >
          <router-link to="/manager/mangerindex" class="menu-router">首页</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item
        ><router-link to="/manager/earningsmanage" class="menu-router">店铺收益</router-link></el-breadcrumb-item
        >
      </el-breadcrumb>
    </template>
    <template #content>
      <span class="text-large font-600 mr-3">店铺收益</span>
    </template>
  </el-page-header>
  <div class="common-layout">
        <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content ep-bg-purple" >
            <el-statistic title="本日店铺点餐收入"  :value="foodtatalamount"   :precision="2"  />
            <div style="margin-top: 20px">  <el-progress :percentage="percent">
              <el-button text>已完成{{percent}}%</el-button>
            </el-progress></div>

<div style="margin-top: 20px">目标金额:{{targetAmount}}￥</div>
            <div style="margin-top: 20px;font-size: 10px; ":style="{ color: betterpercentcolor }"  >较昨日收入上升{{betterpercent}}%</div>
        </div>

        </el-col>
        <el-col :span="6" :offset="2">
          <div class="grid-content ep-bg-purple" >
            <TodayProfitComputer/>
          </div>
        </el-col>
          <el-col :span="6" :offset="2">
            <div class="grid-content ep-bg-purple" >
              <div ref="totalTodayProfit" style="width: 380px;height: 220px">
                <!-- 总收入饼图 -->
              </div>
            </div>
          </el-col>
      </el-row>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content2 ep-bg-purple" ref="profitmain" >4


      </div>
      </el-col>
      <el-col :span="3" :offset="2">
        <div class="grid-content2 ep-bg-purple" ref="profitComputer">
          <ComputerProfit/>
        </div>
      </el-col>
      <el-col :span="6" :offset="5">
        <div class="grid-content3 ep-bg-purple" >
       <el-button type="primary" @click="menulistBysalsasLimteten()">食品销售榜单前十名</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
  <el-dialog title="食品销售榜单前十名" v-model="showdiglog1">
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="rank"
        label="排名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="itemname"
        label="食品名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="sales"
        label="销售量"
        width="180">
      </el-table-column>

    </el-table>
  </el-dialog>
</template>

<script setup>
import * as echarts from 'echarts';
import {onMounted, reactive, ref} from "vue";
import {
  getbetterpercentService,
  getrecommenditemservice,
  gettodayoerderamountService,
  getyesdayoerderamountService, menulistBysalsasLimtetenService
} from "@/api/food.js";
import {ElMessage} from "element-plus";
import {getTodayProfit} from '@/api/computer'
import ComputerProfit from "@/components/computerComponents/ComputerProfit.vue";
import TodayProfitComputer from "@/components/computerComponents/TodayProfitComputer.vue";

const profitmain = ref();
const tableData=reactive([])
let myChart = ref();
const showdiglog1=ref(false)
const percent=ref(0)
const foodtatalamount=ref(0)
const yestodayamount=ref(0)
const betterpercent=ref(10)
const betterpercentcolor=ref("red")
const targetAmount=ref(10000)
const getpercent = () => {
  percent.value=foodtatalamount.value/targetAmount.value*100
}
onMounted(()=>{
  getpercent()
  gettodayoerderamount()
  getbetterpercent()
  initChart()
  getTodayProfitData()
  initTotalProfitChart()
  getyesdayoerderamount()
})
const gettodayoerderamount = async () => {
  const response=await gettodayoerderamountService()
  if(response.code===200){
    foodtatalamount.value=response.date
   await initTotalProfitChart()
    if(foodtatalamount.value>targetAmount.value){
      percent.value=(foodtatalamount.value/targetAmount.value)*100
    }else{
      percent.value=(foodtatalamount.value/targetAmount.value)*100
    }
    await initChart()
    ElMessage.success("获取今日订单金额成功")
  }

}


const getbetterpercent = async () => {
  const response=await getbetterpercentService()
  if(response.code===200){
    betterpercent.value=response.date*100
    if(betterpercent.value>0){
      betterpercentcolor.value="red"
    }else{
      betterpercentcolor.value="green"
    }
    ElMessage.success("获取今日订单金额成功")
  }

}

const getyesdayoerderamount =async () => {

  const response=await getyesdayoerderamountService()
  if(response.code===200){
    yestodayamount.value=response.date
    await initChart()
    ElMessage.success("获取昨日订单金额成功")
  }
else {
  ElMessage.error("获取昨日订单金额失败")
  }
}





const initChart = () => {
  myChart.value = echarts.init(profitmain.value);
  const option = {
    title: {
      text: '每日销售额'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['昨天销售额','今日销售额']
    },
    yAxis: {
      type: 'value',
      name: '销售额',
      min: 0,
      max:1000
   },
    series: [{
      data: [yestodayamount.value, foodtatalamount.value], // 对应的昨日和今日销售额数据
      type: 'bar',
      name: '销售额',
      label: {
        show: true, // 显示柱状图上的数值标签
        position: 'top'
      }
    }]

};
  myChart.value.setOption(option);
};
//今日电脑收入
const todayComputerProfit = ref({
  date: '',
  totalProfit: 0
})
const getTodayProfitData = async () => {
  let result = await getTodayProfit()
  if (result.code === 200) {
    todayComputerProfit.value.date = result.date.date
    todayComputerProfit.value.totalProfit = result.date.totalProfit
    await initTotalProfitChart()
  }
}

const menulistBysalsasLimteten =async () => {
  showdiglog1.value=true
  tableData.length=0
  const response=await menulistBysalsasLimtetenService()
  if(response.code===200){
    response.date.forEach((item)=>{
      item.rank=response.date.indexOf(item)+1
      tableData.push(item)
    })


    ElMessage.success("获取食品销售榜单前十名成功")
  }
  else {
    ElMessage.error("获取食品销售榜单前十名失败")
  }
}
//计算总收入 和显示饼图
let totalTodayProfit = ref()
let myChartTotal = ref()

const initTotalProfitChart = () => {
  myChartTotal.value = echarts.init(totalTodayProfit.value);
  let goodsProfit = foodtatalamount.value;
  let computerProfit = todayComputerProfit.value.totalProfit;
  const totalOption = {
    title: {
      text: '今日总收入',
      left: 'left'
    },
    series: [
      {
        type: 'pie',
        data: [
          {
            value: goodsProfit,
            name: '店铺商品'
          },
          {
            value: computerProfit,
            name: '网咖电脑'
          },
        ]
      }
    ]
  };
  myChartTotal.value.setOption(totalOption);
};
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  margin-top: 20px;
  border-radius: 4px;
  min-height: 36px;

  height:220px;
  width: 400px;
}
.grid-content2 {
  margin-top: 10px;
  border-radius: 4px;
  min-height: 36px;

  height:300px;
  width: 400px;
}
.grid-content3 {
  margin-top: 10px;
  border-radius: 4px;
  min-height: 36px;

  height:300px;
  width: 400px;
}

</style>